<template>
  <div class="file-viewer-container">
    <div class="iframe-container">
      <iframe :src="pageUrl" width="100%" height="100%" class="file-iframe"></iframe>
    </div>

    <div class="file-tabs-sidebar">
      <h3>文件列表</h3>
      <div
        v-for="(file, index) in files"
        :key="index"
        :class="{ 'active-file-item': isActiveFile(file) }"
        class="file-item-wrapper"
      >
        <button
          @click="selectFile(file)"
          class="file-tab-button"
          :title="getFileName(file)"
        >
          <span class="file-index">文件 {{ index + 1 }}</span>
          <span class="file-name-display">{{ getFileName(file) }}</span>
        </button>
        <a :href="file" :download="getFileName(file)" class="download-button" target="_blank" title="下载文件">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="download-icon">
            <path d="M19 9h-4v3H9V9H5l7-7 7 7zM5 18v2h14v-2H5z"/>
          </svg>
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { encryptByBase64 } from '@/utils/cipher';

const { createMessage } = useMessage();
const pageUrl = ref<string | undefined>(undefined);
const files = ref<string[]>([]); // To store all file URLs

/**
 * Initializes the file list and sets the first file as active.
 */
function view(fileUrl) {
  //const fileUrl = "http://154.201.66.67:9000/blithe-crm/temp/U3-U4库ALCON防撞条华瑭报价25.6.25_1750822824166.jpg,http://154.201.66.67:9000/blithe-crm/temp/2025-0625_1750829925275.pdf";
  files.value = fileUrl.split(",");

  if (files.value.length > 0) {
    selectFile(files.value[0]);
  }
}

/**
 * Selects a file and updates the iframe URL.
 * @param file The URL of the file to display.
 */
function selectFile(file: string) {
  let url = encodeURIComponent(encryptByBase64(file));
  pageUrl.value = "http://154.201.66.67:8012/onlinePreview?url=" + url;
}

/**
 * Checks if the given file URL corresponds to the currently displayed file.
 * @param file The file URL to check.
 * @returns True if the file is active, false otherwise.
 */
function isActiveFile(file: string): boolean {
  if (!pageUrl.value) return false;
  const currentEncodedUrl = encodeURIComponent(encryptByBase64(file));
  return pageUrl.value.includes(currentEncodedUrl);
}

/**
 * Extracts the file name from a given URL.
 * @param fileUrl The full URL of the file.
 * @returns The extracted file name.
 */
function getFileName(fileUrl: string): string {
  try {
    const url = new URL(fileUrl);
    const pathSegments = url.pathname.split('/');
    const fileName = pathSegments[pathSegments.length - 1];
    return decodeURIComponent(fileName);
  } catch (e) {
    console.error("Invalid file URL:", fileUrl, e);
    return "Unknown File";
  }
}

defineExpose({
  view,
  pageUrl,
  files,
  selectFile,
  isActiveFile,
  getFileName
});
</script>

<style scoped>
@import './file-viewer.css';
</style>
